<template>
  <div >
    <h2>我是父组件</h2>
    <!-- 使用子组件标签名 -->
    <SonComponent
    v-for="item in message"
    :key="item.id"
    :message="item"
    @NewYear = "NewChange"
    ></SonComponent>
    
    
  </div>
</template>
 
<script>
// 1,引用子组件
import SonComponent from './SonComponent.vue'

export default {
  name: 'FatherComponent',
  // 2,注册子组件
  components:{
    SonComponent
  },

  data() {
    return {
      message: [
        {
          id: '1',
          uname: 'harry',
          famliyName: 'despot',
          age: 28,
          profess: '前端'
        },
        {
          id: '2',
          uname: '志豪',
          famliyName: '陈',
          age: 17,
          profess: '测试'
        },
        {
          id: '3',
          uname: '嘉',
          famliyName: '高',
          age: 21,
          profess: '全栈'
        },
        {
          id: '4',
          uname: '涵翔',
          famliyName: '侯',
          age: 18,
          profess: '帕勒马斯'
        }
      ]
    }
  },
   methods: {
    NewChange(id, num ) {
      this.message.forEach(item => {
        if(item.id === id) {
         item.age += num
        }
      });

    }
  }
 

}
</script>

<style scoped>

</style>